import { Layout, Menu, Modal, Form, message,Checkbox } from 'antd';
import {
  EditOutlined,
  MinusCircleOutlined,
  SearchOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import React, { useState } from 'react';
import {
  Table,
  Radio,
  Divider,
  Space,
  Input,
  DatePicker,
  Select,
  Button,
  Tabs,
} from 'antd';
import ReactDOM, { render } from 'react-dom';
import request from '@/http';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import style from './index.less';

const { Sider, Content } = Layout;
const { Search } = Input;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const GroupManager = (props: any) => {
  const columns:any = [
    {
      title: '小组名称',
      dataIndex: 'teamName',
      key: 'teamName',
    },
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },

    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '年级',
      dataIndex: 'yearName',
      key: 'yearName',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
    },
    {
      title: '班主任',
      dataIndex: 'teacherName',
      key: 'teacherName',
    },

    {
      title: '学员姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学号',
      dataIndex: 'userNo',
      key: 'userNo',
    },
    {
      title: '身份证号码',
      dataIndex: 'idNo',
      key: 'idNo',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text: any, row: any) => {
        return row.sex === 1 ? '男' : row.sex === '0' ? '女' : '';
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
    },
    {
      title: '项目角色',
      dataIndex: 'position',
      key: 'position',
      render: (text: any, row: any) => {
        return row.position == '1'
          ? '前端开发'
          : row.position == '2'
          ? '测试'
          : row.position == '3'
          ? '后端开发'
          : row.position == '4'
          ? '项目经理'
          : row.position == '5'
          ? '产品经理'
          : row.position == '6'
          ? 'UI'
          : '';
      },
    },
    {
      title: '设置组长',
      key: 'isTeamLeader',
      width: 100,
      align: 'center',
      render: (row: any) => (
        <Checkbox
          checked={row.isTeamLeader === '1' ? true : false}
          onChange={(e) => {
            leaderStateOnChange(row, e.target.checked);
          }}
        />
      ),
    },
    {
      title: '操作',
      key: 'active',
      render: (row: any) => {
        return row.teamInfoId ? (
          <>
            <Button
              type="link"
              onClick={() => {
                showModal3(row.studentId);
              }}
            >
              更换分组
            </Button>
            &nbsp;&nbsp;
            <Button
              type="link"
              onClick={() => {
                if (confirm('确认要删除？')) {
                  console.log(row.studentId);
                  deleteBystudentId(row.studentId);
                }
              }}
            >
              删除
            </Button>
          </>
        ) : (
          ''
        );
      },
    },
  ];
  //设置组长
  const leaderStateOnChange = async (row: any, checked: any) => {
    try {
      const result: any = await request.post('/team/setTeamStudentLeader', {
        teamInfoId: row.teamInfoId,
        studentId: row.studentId,
        isTeamLeader: checked ? '0' : '1',
      });
      if (result.code === '200') {
        message.success('组长设置成功');
        selGroup(row.teamInfoId);
      }
    } catch (e) {
      message.error(e.message);
    }
  };


  //查询组员
  interface DataType {
    key: React.Key;
    className: string;
    collegesName: string;
    email: string;
    idNo: string;
    isTeamLeader: string;
    majorName: string;
    mobileNo: string;
    name: string;
    position: string;
    sex: string;
    studentId: string;
    teacherName: string;
    teamInfoId: string;
    teamName: string;
    userNo: string;
    yearName: string;
    active: string;
  }
  //新增成员
  const columns1 = [
    {
      title: '小组名称',
      dataIndex: 'teamName',
      key: 'teamName',
    },
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },

    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '年级',
      dataIndex: 'yearName',
      key: 'yearName',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
    },
    {
      title: '班主任',
      dataIndex: 'teacherName',
      key: 'teacherName',
    },

    {
      title: '学员姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学号',
      dataIndex: 'userNo',
      key: 'userNo',
    },
    {
      title: '身份证号码',
      dataIndex: 'idNo',
      key: 'idNo',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text: any, row: any) => {
        return row.sex === 1 ? '男' : '女';
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
    },
    {
      title: '项目角色',
      dataIndex: 'position',
      key: 'position',
      render: (text: any, row: any) => {
        return row.position == '1'
          ? '前端开发'
          : row.position == '2'
          ? '测试'
          : row.position == '3'
          ? '后端开发'
          : row.position == '4'
          ? '项目经理'
          : row.position == '5'
          ? '产品经理'
          : row.position == '6'
          ? 'UI'
          : '';
      },
    },
  ];

  const [ids, setSelectedRowKeys] = React.useState<any>();
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      setSelectedRowKeys(selectedRowKeys);
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
        selectedRowKeys,
      );
    },
  };
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );

  //新增成员
  interface DataType1 {
    key: React.Key;
    className: string;
    collegesName: string;
    email: string;
    idNo: string;
    isTeamLeader: string;
    majorName: string;
    mobileNo: string;
    name: string;
    position: string;
    sex: string;
    studentId: string;
    teacherName: string;
    teamInfoId: string;
    teamName: string;
    userNo: string;
    yearName: string;
  }
  const [selectedIds, setSelectedIds] = useState<any[]>([]);
  const rowSelection1 = {
    onChange: (selectedRowKeys1: React.Key[], selectedRows1: DataType1[]) => {
      // setStudentsIds(selectedRows1)
      console.log(
        `selectedRowKeys1: ${selectedRowKeys1}`,
        'selectedRows1: ',
        selectedRows1,
      );
      setSelectedIds(selectedRowKeys1);
    },
  };
  const [selectionType1, setSelectionType1] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );

  /**
   * 编辑小组
   */
  const [updateG, setUpdategroup] = React.useState<any>();
  const [updateGr] = Form.useForm(); //获取编辑学生的表单对象
  const [teamInfoId, setTeamInfoId] = React.useState([]);
  const [teamName, setTeamName] = React.useState([]);
  const [isGraduation, setisGraduation] = React.useState([]);
  const updateGroup = async (
    teamInfoId: any,
    isGraduation: any,
    teamName: any,
  ) => {
    setTeamInfoId(teamInfoId);
    setTeamName(teamName), setisGraduation(isGraduation), setUpdategroup(true);
  };
  const updateGroupOnOk = async () => {
    const data = await updateGr.validateFields();
    const result: any = await request.post('/team/updateTeam', {
      ...data,
      role: 1,
    });
    if (result.code == '200') {
      message.success(result.message);
      // loadData(null, 1, pagination.pageSize).finally();
    } else {
      message.error(result.message); //弹出错误信息
      // loadData(null, 1, pagination.pageSize).finally();
    }
    setUpdategroup(false);
  };
  const updateGroupOnCancel = () => {
    setUpdategroup(false);
  };

  //设置小组长
  const [groupHeader, setGroupHeader] = React.useState<any>();
  const [groupHeaderForm] = Form.useForm(); //获取编辑学生的表单对象
  const groupHead = () => {
    setGroupHeader(true);
  };
  const GroupHeaderOk = async () => {
    const data = await groupHeaderForm.validateFields();
    const result: any = await request.post('', {
      ...data,
      role: 1,
    });
    if (result.code == '200') {
      message.success(result.message);
    } else {
      message.error(result.message); //弹出错误信息
    }
    setGroupHeader(false);
  };
  const groupHeaderOnCancel = () => {
    setGroupHeader(false);
  };

  //分页
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });
  const pageOnChange = async (page: any) => {
    await selectAll(formObject.getFieldsValue(), page.current, page.pageSize);
  };

  //获得下拉框数据
  const [college, setCollege] = React.useState([]);
  const getCollege = async () => {
    const College: any = await request.get('/common/getColleges');
    if (College.code == '200') {
      setCollege(College.date);
    } else {
      message.error(College.message); //弹出错误信息
    }
  };
  const [major, setMajor] = React.useState([]);
  const getMajor = async () => {
    const Major: any = await request.get('/common/getMajor');
    if (Major.code == '200') {
      setMajor(Major.date);
    } else {
      message.error(Major.message); //弹出错误信息
    }
  };
  const [grade, setGrade] = React.useState([]);
  const getGrade = async () => {
    const Grade: any = await request.get('/common/getYear');
    if (Grade.code == '200') {
      setGrade(Grade.date);
    } else {
      message.error(Grade.message); //弹出错误信息
    }
  };
  const [className, setClassName] = React.useState([]);
  const getClass = async () => {
    const className: any = await request.get('/common/getClassBase');
    if (className.code == '200') {
      setClassName(className.date);
    } else {
      message.error(className.message); //弹出错误信息
    }
  };
  const [teacher, setTeacher] = React.useState([]);
  const getTeacher = async () => {
    const teacher: any = await request.get('/common/getTeacher');
    if (teacher.code == '200') {
      setTeacher(teacher.date);
    } else {
      message.error(teacher.message); //弹出错误信息
    }
  };

  //新增成员
  const [visible1, setVisible1] = React.useState<any>();
  const [addform] = Form.useForm(); //获取新增学生的表单对象
  const showModal1 = () => {
    setVisible1(true);
    selectAll(null, 1, pagination.pageSize);
    addform.setFieldsValue(null);
  };

  //新增成员
  const modelOnOk1 = async () => {
    const result: any = await request.post('/team/addTeamStudent', {
      id: teamInfoId, //项目组id
      studentId: selectedIds,
    });
    if (result.code == '200') {
      message.success(result.message);
      selectAll(null, 1, pagination.pageSize);
    } else {
      message.error(result.message); //弹出错误信息
      selectAll(null, 1, pagination.pageSize);
    }
    setVisible1(false);
    selGroup(teamInfoId);
  };
  const modelOnCancel1 = () => {
    setVisible1(false);
  };

  //查询所有成员（点击新增成员）
  const [student, setStudent] = React.useState([]);
  const selectAll = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const datas = await addform.validateFields();
    console.log(datas);
    const selectAllR: any = await request.post('/team/selectTeamStudent', {
      classIsGraduation: 0,
      // classIs: 0,
      ...datas,
      ...queryParams,
      page: pageValue,
      number: pageSizeValue,
    });
    console.log(selectAllR);
    if (selectAllR.code == '200') {
      console.log(selectAllR);
      const newData = selectAllR.date.returnDate.map((d: any, index: any) => {
        return {
          key: `k_${index}`,
          ...d,
        };
      });
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: selectAllR.totalCount,
      });
      setStudent(newData);
    } else {
      message.error(selectAllR.message); //弹出错误信息
    }
  };

  //查询所有成员
  const selectAllStudents = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const selectAllStudentsR: any = await request.post(
      '/team/selectTeamStudent',
      {
        isGraduation: 1,
        ...queryParams,
        page: pageValue,
        number: pageSizeValue,
      },
    );
    console.log(selectAllStudentsR);
    if (selectAllStudentsR.code == '200') {
      console.log(selectAllStudentsR);
      const newData = selectAllStudentsR.date.returnDate.map(
        (d: any, index: any) => {
          return {
            key: `k_${index}`,
            ...d,
          };
        },
      );
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: selectAllStudentsR.totalCount,
      });
      setData(newData);
    } else {
      message.error(selectAllStudentsR.message); //弹出错误信息
    }
  };

  //批量更新分组
  const [visible2, setVisible2] = React.useState<any>();
  const [changeforms] = Form.useForm(); //获取新增学shang生的表单对象
  const showModal2 = () => {
    setVisible2(true);
    changeforms.setFieldsValue(null);
  };
  const modelOnOk2 = async () => {
    const datas = await changeforms.validateFields();
    console.log(datas);
    const result: any = await request.post('/team/setStudentTeam', {
      ...datas,
      studentId: ids,
    });
    if (result.code == '200') {
      message.success(result.message);
      selGroup(datas);
    } else {
      message.error(result.message); //弹出错误信息
      // loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible2(false);
  };
  const modelOnCancel2 = () => {
    setVisible2(false);
  };

  // 单个更新分组
  const [visible3, setVisible3] = React.useState<any>();
  const [changeform] = Form.useForm(); //获取新增学生的表单对象
  const [id, setId] = React.useState<any>();
  const showModal3 = (studentId: any) => {
    let newId = [studentId];
    setId(newId);
    setVisible3(true);
    changeform.setFieldsValue(null);
  };
  const modelOnOk3 = async () => {
    const datas = await changeform.validateFields();
    const result: any = await request.post('/team/setStudentTeam', {
      ...datas,
      studentId: id,
    });
    if (result.code == '200') {
      message.success(result.message);
      selGroup(datas);
    } else {
      message.error(result.message); //弹出错误信息
      // loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible3(false);
  };
  const modelOnCancel3 = () => {
    setVisible3(false);
  };

  //新增项目分组
  const [visible4, setVisible4] = React.useState<any>();
  const [addgroup] = Form.useForm(); //获取新增学生的表单对象
  const showModal4 = () => {
    setVisible4(true);
    addgroup.setFieldsValue(null);
  };
  const modelOnOk4 = async () => {
    const datas = await addgroup.validateFields();
    console.log(datas);
    const result: any = await request.post('/team/addTeam', {
      ...datas,
      role: 1,
    });
    if (result.code == '200') {
      message.success(result.message);
      getGroup();
      // loadData(null, 1, pagination.pageSize).finally();
    } else {
      message.error(result.message); //弹出错误信息
      // loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible4(false);
  };
  const modelOnCancel4 = () => {
    setVisible4(false);
  };

  //项目组下拉栏（查询所有项目组）
  const [projectSearchValue, setProjectSearchValue] = React.useState('');
  const searchProjectOnChange = (value: any) => {
    setProjectSearchValue(value.target.value);
  };
  const [group, setGroup] = React.useState([]);
  const getGroup = async () => {
    const Group: any = await request.post('/team/selectTeam', {
      isGraduation: 1,
      teamName: projectSearchValue,
      page: 1,
      number: 10,
    });
    console.log(Group);
    if (Group.code == '200') {
      setGroup(Group.date.returnDate);
      selGroup(Group.date.returnDate[0].teamInfoId);
    } else {
      message.error(Group.message); //弹出错误信息
    }
  };

  //删除项目组（减号图标）
  const delGroup = async (teamInfoId: any) => {
    console.log(teamInfoId);
    const delGroupR: any = await request.post('/team/deleteTeam', {
      teamInfoId: teamInfoId,
    });
    if (delGroupR.code == '200') {
      message.success(delGroupR.message);
      getGroup();
    } else {
      message.error(delGroupR.message); //弹出错误信息
    }
  };

  //查询分组成员
  const [data, setData] = React.useState([]);
  const [formObject] = Form.useForm();

  //根据小组id查询该小组的成员
  const selGroup = async (teamInfoId: any) => {
    setTeamInfoId(teamInfoId);
    const datas = await formObject.validateFields();
    const selGroupR: any = await request.post('/team/selectTeamStudent', {
      isGraduation: 1,
      teamInfoId: teamInfoId,
      page: 1,
      number: 10,
      ...datas,
    });
    console.log(selGroupR);
    if (selGroupR.code == '200') {
      const newData = selGroupR.date.returnDate.map((d: any, index: any) => {
        return {
          key: `k_${index}`,
          ...d,
        };
      });
      setPagination({
        ...pagination,
        // current: pageValue,
        // pageSize: pageSizeValue,
        // total: result.totalCount,
      });
      setData(newData);
    } else {
      message.error(selGroupR.message); //弹出错误信息
    }
  };

  //批量删除
  const deleteAll = async () => {
    const deleteAllR: any = await request.post('/team/deleteTeamStudent', {
      studentId: ids,
    });
    if (deleteAllR.code == '200') {
      message.success(deleteAllR.message);
      // selGroup(studentId);
    } else {
      message.error(deleteAllR.message); //弹出错误信息
    }
  };

  //单个删除
  const deleteBystudentId = async (studentId: any) => {
    let a = [studentId];
    console.log(a);
    const deleteAllR: any = await request.post('/team/deleteTeamStudent', {
      studentId: a,
    });
    if (deleteAllR.code == '200') {
      message.success(deleteAllR.message);
      selGroup(studentId);
    } else {
      message.error(deleteAllR.message); //弹出错误信息
    }
  };

  const onReset = () => {
    addform.resetFields();
    formObject.resetFields();
    selectAll(null, 1, pagination.pageSize);
  };
  React.useEffect(() => {
    getCollege();
    getMajor();
    getGrade();
    getClass();
    getTeacher();
    getGroup();
  }, []);

  return (
    <div className={style.box}>
      <h2 className={style.h2}>项目分组</h2>

      <Button
        type="primary"
        style={{ float: 'left' }}
        onClick={showModal4}
        className={All_style.button}
      >
        +新建分组
      </Button>
      <Modal
        title="新建分组"
        width={1000}
        visible={visible4}
        onOk={modelOnOk4}
        onCancel={modelOnCancel4}
        maskClosable={false} //清除弹框内容
        okText="确认"
        cancelText="取消"
      >
        <Form name="addgroup" form={addgroup} preserve={false}>
          <Form.Item
            name="teamName"
            label="小&nbsp;组&nbsp;名&nbsp;称&nbsp;"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '小组名称不能为空!',
              },
            ]}
            style={{ marginBottom: 24 }}
          >
            <Input placeholder="请输入小组名称"></Input>
          </Form.Item>
          <Form.Item
            name="isGraduation"
            label="是否已结业"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '请选择新的分组!',
              },
            ]}
            style={{ marginBottom: 24 }}
          >
            <Select placeholder="请选择">
              <Option value="0">是</Option>
              <Option value="1">否</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      <Link to="/admin/GroupManager/Graduated">
        <Button className={All_style.button2} style={{ width: 120 }}>
          查看已结业分组
        </Button>
      </Link>

      <Layout>
        <div className={style.siderleft}>
          <Sider className={style.sider}>
            <div className={style.a}>
              <Button
                type="link"
                onClick={() => {
                  selectAllStudents(null, 1, pagination.pageSize);
                }}
              >
                <TeamOutlined />
                查看所有分组成员
              </Button>
            </div>

            <Input
              style={{ width: '100%', marginBottom: 10 }}
              placeholder="请输入关键字"
              suffix={
                <SearchOutlined
                  style={{ color: 'rgba(0,0,0,.45)' }}
                  onClick={getGroup}
                />
              }
              onChange={searchProjectOnChange}
            />

            <div>
              <Menu mode="inline">
                {group.map((c: any, index) => {
                  return (
                    <>
                      <Menu.Item
                        key={`k_${index}`}
                        onClick={() => {
                          selGroup(c.teamInfoId);
                        }}
                      >
                        {c.teamName}

                        <div className={style.listimg}>
                          <EditOutlined
                            onClick={() => {
                              updateGroup(
                                c.teamInfoId,
                                c.teamName,
                                c.isGraduation,
                              );
                            }}
                          />

                          <MinusCircleOutlined
                            onClick={() => {
                              delGroup(c.teamInfoId);
                            }}
                          />
                        </div>
                      </Menu.Item>
                    </>
                  );
                })}
              </Menu>
            </div>
          </Sider>
        </div>

        <Content className={style.content}>
          <Form name="selectForm" form={formObject} preserve={false}>
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="teamName"
                label="小组名称"
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {group.map((c: any, index) => {
                    return (
                      <Option key={`k_${index}`} value={c.teamName}>
                        {c.teamName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>

              <Form.Item
                name="name"
                label="学员姓名"
                style={{ float: 'left', marginLeft: 30 }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="支持模板查询"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Form.Item
                name="userNo"
                label="学号"
                style={{ float: 'left', marginLeft: 30 }}
                className={All_style.formItem}
              >
                <Input
                  placeholder="精准匹配"
                  className={All_style.select}
                ></Input>
              </Form.Item>

              <Button
                className={All_style.button}
                onClick={() => {
                  selGroup(null);
                }}
              >
                查询
              </Button>
              <Button className={All_style.button2} onClick={onReset}>
                重置
              </Button>
            </div>
          </Form>

          <div style={{ clear: 'both' }}>
            <Button
              type="primary"
              className={All_style.button}
              onClick={showModal1}
            >
              +新增成员
            </Button>
            <Modal
              title="新增成员"
              width={1250}
              visible={visible1}
              onOk={modelOnOk1}
              onCancel={modelOnCancel1}
              maskClosable={false} //清除弹框内容
              okText="确认"
              cancelText="取消"
            >
              <Form name="addform" form={addform} preserve={false}>
                <div style={{ clear: 'both' }}>
                  <Form.Item
                    name="collegesId"
                    label="院系："
                    className={All_style.formItem}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '请选择院系!',
                      },
                    ]}
                    style={{ float: 'left', marginLeft: 30 }}
                  >
                    <Select placeholder="请选择" className={All_style.select}>
                      {college.map((c: any, index: any) => {
                        return (
                          <Option key={`k_${index}`} value={c.id}>
                            {c.format}
                          </Option>
                        );
                      })}
                    </Select>
                  </Form.Item>

                  <Form.Item
                    name="majorId"
                    label="专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业"
                    className={All_style.formItem}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '请选择专业!',
                      },
                    ]}
                    style={{ float: 'left', marginLeft: 30 }}
                  >
                    <Select placeholder="请选择" className={All_style.select}>
                      {major.map((c: any, index: any) => {
                        return (
                          <Option key={`k_${index}`} value={c.id}>
                            {c.format}
                          </Option>
                        );
                      })}
                    </Select>
                  </Form.Item>

                  <Form.Item
                    name="yearInfoId"
                    label="年级"
                    className={All_style.formItem}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '请选择年级!',
                      },
                    ]}
                    style={{ float: 'left', marginLeft: 30 }}
                  >
                    <Select placeholder="请选择" className={All_style.select}>
                      {grade.map((c: any, index: any) => {
                        return (
                          <Option key={`k_${index}`} value={c.id}>
                            {c.format}
                          </Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </div>

                <div style={{ clear: 'both', marginTop: 10 }}>
                  <Form.Item
                    name="classBaseInfoId"
                    label="班级"
                    className={All_style.formItem}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '请选择班级!',
                      },
                    ]}
                    style={{ float: 'left', marginLeft: 30 }}
                  >
                    <Select placeholder="请选择" className={All_style.select}>
                      {className.map((c: any, index: any) => {
                        return (
                          <Option key={`k_${index}`} value={c.id}>
                            {c.format}
                          </Option>
                        );
                      })}
                    </Select>
                  </Form.Item>

                  <Form.Item
                    name="name"
                    label="学员姓名"
                    className={All_style.formItem}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入学员姓名!',
                      },
                    ]}
                    style={{ float: 'left', marginLeft: 30 }}
                  >
                    <Input
                      placeholder="支持模板查询"
                      className={All_style.select}
                    ></Input>
                  </Form.Item>

                  <Form.Item
                    name="userNo"
                    label="学号"
                    className={All_style.formItem}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入学号!',
                      },
                    ]}
                    style={{ float: 'left', marginLeft: 30 }}
                  >
                    <Input
                      placeholder="精准匹配"
                      className={All_style.select}
                    ></Input>
                  </Form.Item>
                </div>

                <div style={{ clear: 'both', float: 'right', marginRight: 30 }}>
                  <Button
                    onClick={() => {
                      selectAll(null, 1, pagination.pageSize);
                    }}
                    className={All_style.button}
                  >
                    查询
                  </Button>

                  <Button onClick={onReset} className={All_style.button2}>
                    重置
                  </Button>
                </div>
              </Form>

              <Radio.Group
                onChange={({ target: { value } }) => {
                  setSelectionType1(value);
                }}
                value={selectionType}
              ></Radio.Group>

              <Table
                rowSelection={{ type: selectionType1, ...rowSelection1 }}
                columns={columns1}
                dataSource={student}
                pagination={pagination}
                onChange={pageOnChange}
                tableLayout="fixed"
                rowKey={(record) => record.studentId}
                bordered
              />
            </Modal>

            <Button className={All_style.button2} onClick={showModal2}>
              更新分组
            </Button>
            <Modal
              title="更换分组"
              width={1000}
              visible={visible2}
              onOk={modelOnOk2}
              onCancel={modelOnCancel2}
              maskClosable={false} //清除弹框内容
              okText="确认"
              cancelText="取消"
            >
              <Form name="changeforms" form={changeforms} preserve={false}>
                <Form.Item
                  name="teamInfoId"
                  label="请选择新的分组"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请选择新的分组!',
                    },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <Select placeholder="请选择">
                    {group.map((c: any, index: any) => {
                      return (
                        <Option key={`k_${index}`} value={c.teamInfoId}>
                          {c.teamName}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Form>
            </Modal>

            <Modal
              title="更换分组"
              width={1000}
              visible={visible3}
              onOk={modelOnOk3}
              onCancel={modelOnCancel3}
              maskClosable={false} //清除弹框内容
              okText="确认"
              cancelText="取消"
            >
              <Form name="changeform" form={changeform} preserve={false}>
                <Form.Item
                  name="teamInfoId"
                  label="请选择新的分组"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请选择新的分组!',
                    },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <Select placeholder="请选择">
                    {group.map((c: any, index: any) => {
                      return (
                        <Option key={`k_${index}`} value={c.teamInfoId}>
                          {c.teamName}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Form>
            </Modal>

            {/* 编辑项目组 */}
            <Modal
              title="编辑"
              width={1000}
              visible={updateG}
              onOk={updateGroupOnOk}
              onCancel={updateGroupOnCancel}
              maskClosable={false} //清除弹框内容
              okText="确认"
              cancelText="取消"
            >
              <Form name="updateForm" form={updateGr} preserve={false}>
                <Form.Item
                  name="groupName"
                  label="小组名字"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请输入小组名字!',
                    },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <Input>{teamName}</Input>
                </Form.Item>

                <Form.Item
                  name="isGraduation"
                  label="结业"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请选择!',
                    },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <Select allowClear placeholder={isGraduation}>
                    <Option key="0" value="0">
                      已结业
                    </Option>
                    <Option key="1" value="1">
                      未结业
                    </Option>
                  </Select>
                </Form.Item>
              </Form>
            </Modal>

            {/* 设置小组长*/}
            <Modal
              title="设置小组长"
              width={1000}
              visible={groupHeader}
              onOk={GroupHeaderOk}
              onCancel={groupHeaderOnCancel}
              maskClosable={false} //清除弹框内容
              okText="确认"
              cancelText="取消"
            >
              <Form name="groupHeader" form={groupHeaderForm} preserve={false}>
                <Form.Item
                  name="groupHeader"
                  label="请选择新的组长"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请选择组长!',
                    },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <Select placeholder="请选择"></Select>
                </Form.Item>
              </Form>
            </Modal>

            <Button className={All_style.button2} onClick={deleteAll}>
              批量删除
            </Button>

            <Radio.Group
              onChange={({ target: { value } }) => {
                setSelectionType(value);
              }}
              value={selectionType}
            ></Radio.Group>

            <Table
              className={All_style.table}
              rowSelection={{ type: selectionType, ...rowSelection }}
              columns={columns}
              dataSource={data}
              rowKey={(record) => record.studentId}
            />
          </div>
        </Content>
      </Layout>
    </div>
  );
};
export default GroupManager;
